<style scoped>
    .screennum{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 1100px;
        height: 600px;
        z-index: 10;
        background-color: white;
        overflow: auto;
    }
    .mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.3;
        z-index: 9;
  }
  .sn-top{
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      background: #f4f4f4;
  }
  .sn-top p{
      font-weight: 700;
  }
  .c-top{
      margin: 15px 0;
      display: flex;
      background: #f4f4f4;
      padding: 15px;
  }
  .c-top p{
      margin: 3px 6px 0 0;
  }
  .conten{
      margin:0 15px;
  }
  .tab1{
      width: 28%;
      margin-right: 1%;
      }
  .tab1 div:first-child{
      display: flex;
      margin-bottom: 10px;
  }
  .tab2{
      width: 40%;
      padding: 0 10px;
      border-left: 2px solid #f4f4f4;
      border-right: 2px solid #f4f4f4;
  }
  .tab3{
      width: 30%;
      margin-left: 1%;
  }
</style>
<style>
  .screen-Num .conten .el-input__inner{
      height: 30px;
  }
</style>

<template>
    <div class="screen-Num">
        <div class="mask"></div>
        <div class="screennum">
            <div class="sn-top">
                <p>筛选款号</p>
                <i @click="closeScn" class="el-icon-close"></i>
            </div>
            <div class="conten">
                <div class="c-top">
                    <p>输入款号</p>
                    <el-input v-model="styleNumbers" style="width:160px;margin-right:15px;"></el-input>
                    <el-button @click="query" type="primary" icon="el-icon-search">查询</el-button>
                    <el-button @click="preservation" icon="el-icon-folder-checked">保存</el-button>
                    <el-button @click="Delete" icon="el-icon-delete">删除</el-button>
                    <el-button @click="clean" icon="el-icon-delete">清空</el-button>
                </div>

                <div style="display:flex;">
                    <div class="tab1">
                        <div>
                            <p style="margin:3px 6px 0 0;">筛选条件</p>
                            <el-select style="width:160px;" v-model="quarters" @change="queryQuarters">
                                <!-- <el-table-column
                                type="selection"
                                width="55">
                                </el-table-column> -->
                                <el-option
                                v-for="item in quartersList"
                                :key="item.value+Math.random()"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <el-table
                            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px','text-align':'center'}"
                            :cell-style="{padding:0,height:'36px','text-align':'center'}"
                            height="400px"
                            ref="quarterData"
                            :data="quarterData"
                            style="width: 100%">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                prop="quarterName"
                                label="季度">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="tab2">
                         <el-table
                            height="440px"
                            v-loading="loading"
                            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
                            :cell-style="{padding:0,height:'36px'}"
                            :data="dData"
                            ref="dData"
                            style="width: 100%">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                prop="styleNumber"
                                width="110"
                                label="型号">
                            </el-table-column>
                            <el-table-column
                                show-overflow-tooltip
                                prop="commodityName"
                                width="150"
                                label="品名名称">
                            </el-table-column>
                            <el-table-column
                                prop="quarterName"
                                width="89"
                                label="季度">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="tab3">
                         <el-table
                            height="440"
                            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
                            :cell-style="{padding:0,height:'36px'}"
                            :data="tData"
                            ref="tData"
                            @row-click="rowClick"
                            highlight-current-row
                            style="width: 100%">
                            <el-table-column
                                prop="quarterName"
                                label="季度">
                            </el-table-column>
                            <el-table-column
                                prop="styleNumber"
                                label="款号">
                            </el-table-column>
                            <el-table-column
                                prop="operator"
                                label="操作员">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getQuarterNum,getNumber,getQuarter} from '../../../../network/quarter'
import {getKindsNumberId} from '../../../../network/warehouse'
// import { delete } from 'vue/types/umd'
export default {
    data(){
        return{
            loading:false,
            quarterName:'',
            styleNumber:[],
            details:[],
            tData:[],
            dData:[],
            quarterData:[],
            styleNumbers:'',
            quarters:'全部',
            quartersList:[{label:'全部',value:'全部'},{label:'春夏',value:'春夏'},{label:'秋冬',value:'秋冬'}],
        }
    },
    created(){
        // 全部季度
            getQuarterNum(['']).then(res=>{
            console.log(res.data)
            this.quarterData = []
            res.data.data.forEach(e => {
                this.quarterData.push({quarterName:e})
            });
        });
        // getQuarter().then(res=>{
        //   console.log(res.data)
        //   this.quarterData = []
        //   res.data.data.forEach(e=>{
        //     this.quarterData.push({label:e.name,value:e.id})
        //   })
        // })
    },
    methods:{

        Delete(){
            // this.tData.splice(this.$refs.dData.selection, 1)
            for(let a in this.tData){
                for(let s of this.details){
                    if(s == this.tData[a]){
                        this.tData.splice(a,1)
                    }
                }
            }
        },

        rowClick(e){
            console.log(e)
            this.details = [e]
        },

        clean(){
            //清空
            this.tData.splice(this.$refs.dData.selection,100000)
            // this.tData = []
        },
        //保存
        preservation(){
            this.tData = this.$refs.dData.selection
            console.log(this.tData)
            var q = []
            var p = []
            var pID = []
            this.tData.forEach(e=>{
                q.push(e.quarter)
                p.push(e.styleNumber)
            })

            // getKindsNumberId({list:JSON.stringify(p).replace(/\[|]/g, '').replace(/\"|"/g, '')}).then(res=>{
            //   pID = res.data.data
            //   if(res.data.code == 200){
                let obj = [q,p]
                console.log(obj)
                this.$emit("preservation",obj)
              // }
            // })
        },

        queryQuarters(){
            var Aquarters = this.quarters
            if(this.quarters == "全部"){
                Aquarters = ''
            }
            let obj = [Aquarters]
            console.log(obj)
            getQuarterNum(obj).then(res=>{
            console.log(res.data)
            this.quarterData = []
            res.data.data.forEach(e => {
                this.quarterData.push({quarterName:e})
            });
        });
        },
        //查询
        query(){
            if(this.styleNumbers == ''){
                this.loading = true
                var qe = this.$refs.quarterData.selection
                // console.log(JSON.stringify(qe).replace(/\{|}/g, ''))
                var qew = []
                qe.forEach(e=>{
                    qew.push(e.quarterName)
                })
                console.log(qew)
                getNumber(qew).then(res=>{
                    console.log(res.data)
                    this.loading = false
                    this.dData = res.data.data
                })
            }else{
                this.loading = true
                let obj1 = [this.styleNumbers]
                console.log(obj1)
                getNumber(obj1).then(res=>{
                    console.log(res.data)
                    this.loading = false
                    this.dData = res.data.data
                // var Res = []
                // Res = res.data.data
                // var result = [];
                // var obj3 = {};
                // for (var i = 0; i < Res.length; i++) {
                // if (!obj3[Res[i].key]) {
                //     result.push(Res[i]);
                //     obj3[Res[i].key] = true;
                // }
                // }
                // console.log(result);
                // this.dData = result//数组里对象去重
                })

            }
        },

        closeScn(){
            this.$emit('closeScn')
        }
    },
    watch: {
      styleNumbers(a,b){
        if(a){
          this.styleNumbers = a.toUpperCase().trim()
        }
      }
    }
}
</script>